<template>
  <el-image  class="fp-absolute" fit="fit" ref="qrcode"  :style="itemStyle"  draggable="false" :src="imgSrc"/>
</template>

<script>
import QRCode from 'qrcode'

export default {
name: "FpItemQrcode",
data() {
  return {
    imgSrc: ''
  }
},
props: {
  item: {
    type:Object,
    default:()=>{}
  },
  scale:{
    type:Number,
    default:1
  }
},
watch: {
  'item.v': {
    handler() {
      this.gen();
    }
  },
  'item.c': {
    handler() {
      this.gen();
    }
  },
  'item.bgc': {
    handler() {
      this.gen();
    }
  },
},
computed:{
  itemStyle(){
    return {
      'z-index':this.item.z,
      width: this.item.w*this.scale+'px',
      height:this.item.h*this.scale+'px',
      top:this.item.y*this.scale+'px',
      left:this.item.x*this.scale+'px',
      transform: `rotate(${this.item.angle}deg)`
    }
  }
},
created() {
  this.gen();
},
methods: {
  gen() {
    let item = this.item;

    if (!this.item.v) {
      return;
    }

    // 参考文档: https://www.npmjs.com/package/qrcode#options
    let opts = {
      // errorCorrectionLevel: 'L',  // 容错等级（特权: 容错等级可设置）
      errorCorrectionLevel: 'M',  // 容错等级（特权: 容错等级可设置成最高）
      // type: 'image/png',       // 必须设置成png或者svg才能支持透明,默认svg
      // version: 1,                 // 容量
      margin:  item.p,               // 内边距
      // scale: 8,
      width: item.w,                // 宽度
      color: {
        dark: item.c,               // 前景色
        light: item.bgc !== '' ? item.bgc : '#ffffff00'          // 背景色
        // light: '#ffffff00'       // 透明
      },
    };
    // console.info('>>>: v, p, ', item.v, item.p)
    let v = item.v + '';

    let that = this;
    QRCode.toDataURL(v, opts, function (err, url) {
      if (err) throw err;
      that.imgSrc = url;
    })
  }
}
}
</script>

<style scoped>
.fp-absolute{
position: absolute;
box-sizing: border-box;
border:1px solid  transparent; 
}
.fp-absolute:hover{
border: 1px solid #2c8ef8;
}

</style>